
<template>
  <div>
      <el-table
    :data="table.data"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
    <el-upload :before-upload="handleUpload" action="default">
      <el-button type="primary">选择要导入的 .xlsx 表格</el-button>
    </el-upload>
    <div>
    <el-button @click="export2Excel" type="primary">
      <el-icon name="download" />导出为 Excel
    </el-button>
  </div>

  <Can/>

  
  </div>
</template>
 
<script>
import Vue from "vue";
import pluginImport from "@d2-projects/vue-table-import"
import Can from '@/views/canvas'
 
Vue.use(pluginImport)
// Vue.use(pluginExport)
 
export default {
  data() {
    return {
      table: {
        columns: [],
        data:[
            {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }
        ],
      },
    };
  },
  mounted(){
      this.kong()
  },
  components:{
    Can
  },
  methods: {
    handleUpload(file) {
      this.$import.xlsx(file).then(({ header, results }) => {
        // this.table.columns = header.map((e) => {
        //     console.log(e);
        //   return {
        //     label: e,
        //     prop: e,
        //   };
        // });
        // console.log(header);
        this.table.data =[]
        this.table.data = JSON.parse(JSON.stringify(results));
        this.table.data=this.table.data.map((item)=>{
            return{
                date:item.日期,
                name:item.姓名,
                address:item.地址
            }
        })
      });
      return false;
    },
  export2Excel() {
　require.ensure([], () => {
　　　const { export_json_to_excel } = require('../../excel/Export2Excel');
　　　const tHeader = ['日期', '姓名', '地址'];
　　　// 上面设置Excel的表格第一行的标题
　　　const filterVal = ['date', 'name', 'address'];
　
　　　const list = this.table.data;  
　　　const data = this.formatJson(filterVal, list);
　　　export_json_to_excel(tHeader, data, '列表excel');
　　})
　　},
　　formatJson(filterVal, jsonData) {
     return jsonData.map(v => filterVal.map(j => v[j]))
   },
 kong(){
      let b=11
      console.log(this.a??b);//空运算符
    }
  }
};
</script>
 
<style>
</style>
